<!DOCTYPE html>
<html>
  <head>
	<meta charset="UTF-8">
	<title>Options for Link Tweak extension</title>
	<style>
	  body { font-family: serif; }
	  h1 { text-shadow: 2px 2px 4px #888; }
	  h2 {
	    font-style:italic; border-bottom:solid 2px black;
	    margin:0; text-shadow:2px 2px 1px #ccc;
	  }
	  #main { display:inline-block; margin-left:24px; }
	  #presets { margin: 10px 16px 20px 16px; font-size:14px; line-height:30px; }
	  #preset-maps-lang { width: 40px; }
	  .rule { padding: 8px 16px; border-bottom:solid 1px gray; font-size: 16px; }
	  .rule-preset { background-color:#fcfcfc; }
	  .rule-delete { float:right; font-size:14px; }
	  .rule-label { float:left; font-weight:bold; }
	  .rule-value { margin-left:160px; }
	  .rule-pattern { width:300px; }
	  .rule-substitution { width:300px; }
	  .rule-conditions-label { margin-top: 8px; font-weight:bold; }
	  .rule-condition-regexp { width:400px; margin:0px 8px; }
	  .rule-condition-delete {
	    display: inline-block; width:16px; height:16px; text-align:center;
	    border: solid 1px red; border-radius:4px; text-decoration:none;
	    color:white; font-weight:bold; font-size:16px; line-height:16px;
	    text-shadow: -1px -1px 1px #fcc, 1px 1px 1px black; background-color:#fcc;
	    box-shadow: inset 0 -13px 2px red, 1px 1px 0 0 #844;
	  }
	  div.rule-add-condition { text-align:right; font-size:14px; }
	  #save { margin-right:50px; }
	  .description {margin-top:20px; font-size:14px; width:600px; }
	</style>
  </head>
  <body>

	<h1><img src="icon-64.png"> Options for Link Tweak extension</h1>

	<div id="main">

	  <h2>Preset rules</h2>
	  <div id="presets">
		<label>
		  <input type="checkbox" id="preset-documents">
		  Open document files (.pdf, .doc, .xls, .ppt and more) with
		  <a href="http://docs.google.com/viewer" target="_blank">Google Docs Viewer</a>.
		</label><br>
		<label>
		  <input type="checkbox" id="preset-images">
		  Open image files (.psd, .ai, .tiff and more) with
		  <a href="http://docs.google.com/viewer" target="_blank">Google Docs Viewer</a>.
		</label><br>
		<input type="checkbox" id="preset-maps">
		Set <input type="text" id="preset-maps-lang"> (en, ja etc...) as the language of
		&quot;map&quot; link in Google Calendar.<br>
	  </div>

	  <h2>Rewrite rules</h2>
	  <div id="rewrite-rules"></div>
	  <div style="text-align:right; font-size:14px;">
		<a id="add-rule" href="#">Add rule</a>
	  </div>

	  <div style="text-align:center;">
		<input id="save"  type="button" value="Save"  disabled="disabled">
		<input id="reset" type="button" value="Reset" disabled="disabled">
	  </div>

	  <div class="description">
		The part of the url that matched with <b>Rewrite pattern</b> is replaced with
		<b>Substitution</b> if all conditions are true. Rewrite patterns and conditions
		are <a href="https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Regular_Expressions" target="_blank">regular expressions</a>. &quot;$1&quot;〜&quot;$9&quot; is replaced with
		submatch and &quot;$0&quot; is replaced with the url-escaped matched string in
		substitution.
	  </div>
	</div>

	<script src="Options.js"></script>

  </body>
</html>
